<template>
  <n-card :bordered="false" class="proCard" :style="{ height: `${bodyHeight}px` }">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row) => row.dictionaryItemId"
      ref="actionRef"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
    >
      <template #tableTitle>
        <n-button type="primary" @click="addTable">
          <template #icon>
            <n-icon>
              <PlusOutlined />
            </n-icon>
          </template>
          添加字典键
        </n-button>
      </template>

      <template #action>
        <TableAction />
      </template>
    </BasicTable>

    <Edit ref="editRef" :dictionaryId="formParams.dictionaryId" @reloadTable="reloadTable"></Edit>
  </n-card>
</template>

<script lang="ts" setup>
import { reactive, ref, unref, h, onMounted, defineProps, watch, computed } from 'vue';
import { useMessage, useDialog, NSwitch, NTag } from 'naive-ui';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { BasicTable, TableAction } from '@/components/Table';
import { getPageList, deleteById, updateEnabled } from '@/api/system/dictionaryItems';
import { PlusOutlined } from '@vicons/antd';

import Edit from './edit.vue';

const formRef: any = ref(null);
const message = useMessage();
const actionRef = ref();
const dialog = useDialog();

const formBtnLoading = ref(false);
const checkedAll = ref(false);
const expandedKeys = ref([]);
const checkedKeys = ref(['console', 'step-form']);
const editRef = ref(null);

const props = defineProps({
  dictionaryIds: {
    type: Array,
    default: () => ref([]),
  },
});

watch(
  () => props.dictionaryIds,
  function (newValue, oldValue) {
    if (props.dictionaryIds.length > 0) {
      formParams.dictionaryId = props.dictionaryIds[0];
      reloadTable();
    }
  }
);

const schemas: FormSchema[] = [
  {
    field: 'itemKeyCode',
    component: 'NInput',
    label: '字典键Code',
    componentProps: {
      placeholder: '请输入字典键Code',
      onInput: (e: any) => {},
    },
  },
  {
    field: 'itemKeyName',
    component: 'NInput',
    label: '字典键名称',
    componentProps: {
      placeholder: '请输入字典名称',
      onInput: (e: any) => {},
    },
  },
];

const [register, {}] = useForm({
  gridProps: { cols: '1 s:1 m:2 l:3' },
  labelWidth: 100,
  schemas,
});

function handleSubmit(values: Recordable) {
  Object.assign(formParams, values);
  reloadTable();
}

function handleReset(values: Recordable) {}

const columns = [
  {
    title: '#',
    key: 'key',
    width: 20,
    render: (_, index) => {
      return `${index + 1}`;
    },
  },
  {
    title: '字典键Code',
    key: 'itemKeyCode',
    width: 100,
  },
  {
    title: '字典键名称',
    key: 'itemKeyName',
    width: 100,
  },
  {
    title: '字典键描述',
    key: 'itemKeyDescribe',
    width: 300,
  },
];

const formParams = reactive({
  dictionaryId: null,
  configKeyCode: '',
  configName: '',
});

const actionColumn = reactive({
  width: 100,
  title: '操作',
  key: 'action',
  fixed: 'right',
  render(record) {
    return h(TableAction, {
      style: 'button',
      actions: [
        {
          label: '编辑',
          onClick: handleEdit.bind(null, record),
          ifShow: () => {
            return true;
          },
          //auth: ['basic_list'],
        },
        {
          label: '删除',
          icon: 'ic:outline-delete-outline',
          onClick: handleDelete.bind(null, record),
          // 根据业务控制是否显示 isShow 和 auth 是并且关系
          ifShow: () => {
            return true;
          },
          // 根据权限控制是否显示: 有权限，会显示，支持多个
          //auth: ['basic_list'],
        },
      ],
    });
  },
});

function addTable() {
  editRef.value.open();
}

const loadDataTable = async (res: any) => {
  var data = await getPageList({ ...formParams, ...res });
  return data.result;
};

function onCheckedRow(rowKeys: any[]) {
  console.log(rowKeys);
}

function reloadTable() {
  actionRef.value.reload();
}

function handleEdit(record: Recordable) {
  editRef.value.open(record);
}

function handleDelete(record: Recordable) {
  dialog.info({
    title: '提示',
    content: `您确定想删除吗?`,
    positiveText: '确定',
    negativeText: '取消',
    onPositiveClick: () => {
      deleteById(record.dictionaryItemId).then((res) => {
        if (res.success) {
          message.success('删除成功');
          reloadTable();
        }
      });
    },
    onNegativeClick: () => {
      message.error('已取消');
    },
  });
}
</script>

<style lang="less" scoped></style>
